<template>
	<view>
		<!-- <back-fixed title="分类标签管理"></back-fixed> -->
		<view class="main">
			<u-tabs :list="nav" active-color="#4DC0D9" font-size="32" inactive-color="#666666" :is-scroll="false"
				:current="current" @change="change" style="position: fixed;width: 100%;"></u-tabs>
			<view class="box">
				<u-gap height="20" bg-color="#f8f8f8"></u-gap>
				<view class="bg-white">
					<view class="mark_zoom">
						<view class="mark_zoom_box" v-for="m,k in list" :key="m.name">
							<view class="mark_zoom_title">
								{{m.name}} {{m.createType}}
							</view>
							<view class="mark_zoom_item">
								<view class="disease" :class="{'checked':n.check}"
									@click="selectMarked(k,key,n.tagGroupId,m)" v-for="n,key in m.tagList"
									:key="n.tagId">
									{{cultString(n.tagName)}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<empty-team text="暂无标签" v-if="empty" style="padding-top: 200px;"></empty-team>
				<u-loadmore :status="status" v-if="!empty" />
				<!-- <view cclass="bg-white" v-if="current == 1">
					医院标签
				</view>

				<view cclass="bg-white" v-if="current == 2">
					科室标签
				</view> -->
				<u-modal v-model="showNoIn" :content="NoinContent" confirm-color="#4DC0D9" :show-cancel-button="true"
					confirm-text="查看标签组" cancel-text="我知道了" @confirm="confirmDel" :show-title="false"
					:cancel-style="{'borderRight':'1px solid #f8f8f8'}"></u-modal>
			</view>
		</view>
		<bottom-button text="新建标签组" @confirm="confirm" style="position: absolute;z-index: 2;"></bottom-button>
		<go-nav></go-nav>
	</view>
</template>

<script>
	import {
		getMarkLst,
		getMark
	} from '@/api/index.js'
	
	export default {
		
		data() {
			return {
				nav: [{
					name: '全部标签'
				}, {
					name: '医院标签'
				}, {
					name: '科室标签'
					// count: 5
				}],
				inactive: true,
				markList: [
					// {
					// 	name: '风险预测（企业微信同步）',
					// 	tagList: [{
					// 			tagName: '冠心病高风湿病',
					// 			tagId: 11,
					// 			check: false
					// 		},
					// 		{
					// 			tagName: '痛风高风险',
					// 			tagId: 12,
					// 			check: false
					// 		}
					// 	]
					// },
				],
				showNoIn: false,
				NoinContent: '',
				current: 0,
				empty: false,
				list: [],
				status: 'loading',
				pageNum: 1, //当前条目数
				totalCount: 0, //总条目数
				pageSize: 15, //每页总条数
				avg: 0, //总页数
				first: true //标识
			}
		},
		onLoad() {
			//console.log(123);
		},
		async onShow() {
			await this.clearPageStatus()
			this.getTeam()
			this.$forceUpdate()
			//this.change(0)
		},
		computed: {
			cultString(val) {
				return (val) => {
					if (!val) return ''
					const word = val.toString()
					if (word.length > 5) {
						return word.slice(0, 5) + '...'
					} else {
						return word
					}
				}
			}
		},
		methods: {
			async getMyList(obj) {
				this.$store.commit('EditGroup', []) //清空vuex
				let res = await getMarkLst({
					'groupType': this.current,
					...obj
				}) //全部：0，医院标签：1，科室标签：2
				return res
			},
			change(index) {
				this.clearPageStatus()
				//console.log(index);
				//this.init(index) //查询列表
				this.current = index;
				this.getTeam()
			},
			async selectMarked(k, key, tagGroupId, obj) { //标签选中
				let res = await getMark(tagGroupId)
				this.$store.commit('EditGroup', res)
				//console.log(obj);
				if (obj.createType.search('企业微信') > -1) { //企业标签不能编辑删除
					this.showNoIn = true
					this.NoinContent = '受企微接口调用安全性限制，本应用仅支持查看企业微信后台创建的标签组，如需编辑/删除，请至企业微信后台操作'
					return
				}
				if (res.code == 200) {
					uni.navigateTo({
						url: '/pages/intel/markGroup?isEdit=1'
					})
				} else {
					this.$u.toast('标签组已删除或不存在！！！')
				}
				//console.log(res);
				//this.markList[k].tagList[key].check = !this.markList[k].tagList[key].check
			},
			confirmDel() {
				uni.redirectTo({
					url: '/pages/intel/markGroupDis?isEdit=1'
				});
			},
			confirm(e) {
				//console.log(12121,e);
				uni.navigateTo({
					//uni.redirectTo({
					url: '/pages/intel/markGroup'
				});
			},
			clearPageStatus() { //清空，当需要重新加载此分页时，先调用清空再调用请求
				this.list = []
				this.first = true
				this.status = 'loading';
				this.pageNum = 1 //当前条目数
				this.totalCount = 0 //总条目数
				this.avg = 0
			},
			async getTeam() { //团队列表
				//console.log(this.pageNum , this.avg);
				let obj = {
					'pageNum': this.pageNum,
					'pageSize': this.pageSize,
				}
				//console.log(this.pageNum , this.avg && !this.first);
				if (this.pageNum > this.avg && !this.first) {
					this.status = 'nomore'
					return
				}
				if (this.pageNum == this.avg && this.status !== 'nomore') {
					let res = await this.getMyList(obj) //请求参数在上面拼接好最后
					if (res.code == 200) {
						this.first = false
						this.totalCount = res.total
						this.avg = Math.ceil(this.totalCount / this.pageSize)
						this.pageNum = ++this.pageNum
						this.list.push(...res.rows)
						this.status = 'nomore'
						if (this.list.length > 0) {
							this.empty = false
						} else {
							this.empty = true
						}
						return
					}
				}
				let res = await this.getMyList(obj) //请求参数在上面拼接好最后
				if (res.code == 200) {
					this.first = false
					this.totalCount = res.total
					this.avg = Math.ceil(this.totalCount / this.pageSize)
					this.list.push(...res.rows)
					this.pageNum = ++this.pageNum;
					this.status = 'loading';
					if(this.avg == 1){  //上来就一页，且不能翻页的情况下
						this.status = 'nomore'
					}
				}
				if (this.list.length > 0) {
					this.empty = false
				} else {
					this.empty = true
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #F8F8F8;
		//padding-top: 90rpx;
		min-height: 100vh;

		.box {
			//margin-top: 20rpx;
			padding: 62rpx 0 200rpx 0;
			background-color: white;

			//min-height: 100vh;
			.mark_zoom {
				//padding: 0 24rpx 0 24rpx;
				margin-top: 10px;

				.mark_zoom_box {
					display: flex;
					flex-direction: column;
					margin-top: 32rpx;
					margin-bottom: 60rpx;

					//margin-bottom: 560rpx;
					.mark_zoom_title {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #212121;
						line-height: 38rpx;
						margin-bottom: 20rpx;
						padding-left: 24rpx;
					}

					.mark_zoom_item {
						display: flex;
						flex-wrap: wrap;
						//justify-content: space-between;
						//align-content: center;
						padding-left: 24rpx;

						.disease {
							width: 220rpx;
							//height: 80rpx;
							text-align: center;
							background: #F2F2F2;
							border-radius: 12rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 30rpx;
							color: #333333;
							line-height: 75rpx;
							//padding: 20rpx 80rpx;
							margin-bottom: 20rpx;
							margin-right: 22rpx;
						}
					}

					.checked {
						color: #4DC0D9 !important;
						background-color: #A6DFEC !important;
						border: 2rpx solid #4DC0D9;
					}
				}
			}
		}
	}
</style>